<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="search" type="text">
  <ul id="result"></ul>
  <script type="module">
    import { getJSON } from './ajax/index.js'
    const searchInput = document.getElementById('search');
    const resultList = document.getElementById('result');
    const handleInput = () => {
      if (searchInput.value.trim() !== '') {
        getJSON(`${url}`).then(response => {
          // console.log(response);
          let html = ''
          const timer = null;
          for (const item of response) {
            html += `<li>${item.word}</li>`
          }
          resultList.innerHTML = html;
          resultList.style.display = ''
        }).catch(err => {
          console.log(err);
        })
      } else {
        resultList.innerHTML = '';
        resultList.style.display = 'none'
      }
    };
    // 返回[{"word": "js"}, {"word": "jsp"}, {"word": "jsw"}, {"word": "jsf"}]
    const url = "https://16135cc2-688f-4bb3-9cac-950ba109ab4a.mock.pstmn.io/imputTips"
    let timer = null;
    // IE9开始支持
    searchInput.addEventListener('input', () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(handleInput, 500)
    }, false)
  </script>
</body>

</html>